| Web3D｜基于WebGL的Three.js框架｜入门篇/附：WebGL+Three.js入门与实战，系统学习Web3D技术课程 | 您所在的位置：网站首页 › echarts svg canvas › Web3D｜基于WebGL的Three.js框架｜入门篇/附：WebGL+Three.js入门与实战，系统学习Web3D技术课程 |
Web3D｜基于WebGL的Three.js框架｜入门篇/附：WebGL+Three.js入门与实战，系统学习Web3D技术课程
 WebGL+Three.js入门与实战，系统学习Web3D技术课程-领取方式点本社头像随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。 前段时间，由于项目的需要，学习了一下用JavaScript实现的WebGL开源框架three.js。看到官网上非常酷炫的3D演示，着实让人心动不已！  从Hello World说起还是依旧，我们通过一段小小的示例，来看看怎么使用three.js框架。 var camera, scene, controls, renderer; init(); animate(); function init() { // camera camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.01, 10000); camera.position.set(0, 50, 500); // scene scene = new THREE.Scene(); scene.background = new THREE.Color(0xf0f0f0); // light var light = new THREE.DirectionalLight(0xffffff); light.position.set(0, 0, 1); scene.add(light); //Add a Cube var cube = new THREE.Mesh(new THREE.BoxGeometry(50, 100, 20), new THREE.MeshBasicMaterial({color: 0xff0000})); cube.name = "Cube"; cube.rotation.y = Math.PI / 4; cube.rotation.z = Math.PI / 4; scene.add(cube); // renderer renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); } function animate() { renderer.render(scene, camera); requestAnimationFrame(animate); } 组件介绍通过上面的Demo可以看到，three.js的创建有以下几部分组成： 渲染器（Renderer）场景（Scene）相机（Camera）光源（Lights）物体（Mesh）一. 渲染器（Renderer） 是一个HTML DOM元素，将会被嵌入到HTML页面中，它会通过循环调用animate()方法来渲染场景（Scene）和相机（Camera）。 renderer.render(scene, camera);二. 场景（Scene） 场景（Scene）是所有渲染的3D元素的根元素，也就是一个三维空间，所有的图形，光源及辅助工具都需要加入其中。 三. 相机（Camera） 相机（Camera）用来控制三维空间中物体的投影，以及我们在屏幕上看到的内容。一般情况下分为两种： 透视投影：THREE.PerspectiveCamera，遵循近大远小规则，跟现实生活中我们看物体的方式是一样的。 正投影：THREE.OrthographicCamera，不论远近，按照统一的大小进行投影。 另外，Camera中的坐标系统也与我们平时编程中的屏幕坐标系统不一样，它用的是右手坐标系统（几何中的坐标系）。  四. 光源（Lights) 光源（Lights）是3D中一个很重要的概念，和现实世界一样，同样的物体，在不同的光源照射下，呈现的效果也不一样，比如自然光，灯泡，LED灯照射后物体的颜色也会有很大的不同。three.js中，光源大致分为8种： AmbientLight: 环境光 ；它的颜色会添加到整个场景和所有对象的当前颜色上PointLight: 点光源；空间中的一点，朝所有的方向发射光线SpotLight: 聚光灯光源；聚光灯是由点光源发出，这种类型的光也可以产生投影，有聚光的效果DirectionalLight:方向光，平行光；例如：太阳光HemisphereLight：半球光光源 ；可以为室内场景创建更加自然的光照效果，模拟反光面和光线微弱的天气AreaLight:面光源； 使用这种光源可以指定散发光线的平面，而不是空间的一个点RectAreaLight：矩形区域光源；这种光从一个矩形面均匀地发射，可以用来模拟明亮的窗户或者带状的照明；可以产生投影LensFlare：镜头炫光；这不是一种光源，但是通过该炫光可以为场景中的光源添加炫目的效果五. 物体（Mesh） 物体（Mesh）才是我们最终要展现给用户的3D形状，如长方体，球体等。它有两个重要的组成部分： 形状（Geometry）：3D的各种形状材质（Material）：物体表面的渲染方式，包括颜色，与光源的交互等。小结Three.js作为实现了WebGL的优秀的开源框架，其功能已经是比较丰富和完善了。但是对于一些初次接触3D的人，肯定会被里面的各种概念搅的天翻地覆。只要理清楚了上面所说的这些基本概念，我相信你也能很快入门。 |
【本文地址】